<!--
 * @Date: 2024-12-13 09:25:27
 * @Author: LiSong
 * @LastEditors: LiSong
 * @LastEditTime: 2025-02-17 14:47:03
 * @Description: 
-->
<template>
  <HpDialog
    ref="dialogRef"
    v-model="dialogState.visible"
    title="数据源编辑"
    width="80%"
    height="80%"
    class="dbsource-dialog"
    :appendToBody="false"
    @close="handleCancel"
    @confirm="handleConfirm"
  >
    <div class="dbsource-dialog-body">
      <el-form-item label="数据类型">
        <el-radio-group v-model="dataSource.type">
          <el-radio
            v-for="typeItem in DbSourceType.getTypes()"
            :key="typeItem.value"
            :label="typeItem.label"
            :value="typeItem.value"
          />
        </el-radio-group>
      </el-form-item>
      <div class="dbsource-comps">
        <keep-alive>
          <component
            :is="sourceComp[dataSource.type]"
            :schema="schema"
            :dataSource="dataSource"
          >
          </component>
        </keep-alive>
      </div>
    </div>
  </HpDialog>
</template>

<script setup>
import { computed, reactive, ref } from 'vue';

import { DbSourceType } from '@hp/config/pojo'


import HpDialog from '@hp/comps/dialog/src/HpDialog.vue'
import SourceSql from '../modules/SourceSql.vue'
import SourceView from '../modules/SourceView.vue'
import SourceStatic from '../modules/SourceStatic.vue'
import SourceServer from '../modules/SourceServer.vue'

const sourceComp = {
  [DbSourceType.SQL.value] : SourceSql,
  [DbSourceType.VIEW.value] : SourceView,
  [DbSourceType.SERVER.value] : SourceServer,
  [DbSourceType.STATIC.value] : SourceStatic,
}

const props = defineProps({
  // 弹窗名称
  title: { type: String, default: '数据源编辑' },
  // 数据集
  schema: { type: Object },
  // 结构配置
  config: { type: Object },
  // 是否可见
  visible: { type: Boolean, default: false },
  // 数据集
  dataSource: { type: Object },
  // 取消方法
  onCancel: { type: Function },
  // 确认方法
  onConfirm: { type: Function },
  // 销毁方法
  onDestory: { type: Function },
})

// 弹窗的Ref
const dialogRef = ref(null)
const dataSource = computed(() => {
  return props.dataSource
})
// 弹窗数据集
const dialogState = reactive({
  visible: props.visible
})

const handleCancel = () => {
  if (props.onCancel) { props.onCancel() }
  handleDestory()
}

const handleConfirm = () => {
  if (props.onConfirm) { props.onConfirm(dataSource.value) }
  handleDestory()
}
const handleDestory = () => {
  if (props.onDestory) { props.onDestory() }
}

</script>

<style lang="scss" scoped>
.dbsource-dialog-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  padding: 0 18px;
  .dbsource-types {
    display: flex;
    // padding: 0 6px;
    align-items: center;
    margin-bottom: 10px;
    .dbsource-types-label {
      margin-right: 10px;
    }
  }
  .dbsource-comps {
    flex: 1;
    // padding: 6px;
    min-height: 20px;
  }
}
</style>
<style lang="scss">
.dbsource-dialog {
  .hp-dialog-body {
    padding: 18px 0 !important;
  }
  .el-form-item,
  .source-code-panel {
    margin-bottom: 10px;
  }
  .source-view-item {
    margin-bottom: 5px;
  }
}
</style>